<template>
<div>
  <div class="container">
    <div class="left"></div>
    <div class="middle" id="map"></div>
    <div class="right">
      <div class="list">
        <div class="item" @click="drawArea(1)" style="background: #00CC66">一级区域</div>
        <div class="item" @click="drawArea(2)" style="background: #CC0066">二级区域</div>
        <div class="item" @click="drawArea(3)" style="background: #FFFF66;color:#666;">三级区域</div>
        <div class="item" @click="drawLine()">管道</div>
        <div class="item" @click="drawPoint(1)">压力表</div>
        <div class="item" @click="drawPoint(2)">流量计</div>
        <div class="item" @click="drawPoint(3)">水表</div>
        <div class="item" @click="savaDraw">保存</div>
        <div class="item" @click="clearDraw">清空</div>
      </div>
    </div>
  </div>
</div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  mapKey,securityJsCode,location
} from '@/utils/mapParams'
import {shallowRef,onMounted} from "vue";
const mapRef = shallowRef(null)
const mousetool = shallowRef(null)
const contextMenu = shallowRef(null)
const contextMenuFun = (e,AMap) => {
  contextMenu.value = new AMap.ContextMenu();
  contextMenu.value.addItem("删除", function () {
    e.target.remove()
    contextMenu.value.close()
    contextMenu.value = null
  }, 0);
  //右键缩小
  contextMenu.value.addItem("编辑", function () {
    mapRef.value.zoomOut();
    contextMenu.value.close()
    contextMenu.value = null
  }, 1);
  contextMenu.value.open(mapRef.value, e.lnglat);
}
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: securityJsCode,
  }
  AMapLoader.load({
    key:mapKey,
    version:"2.0",
    plugins:[''],
  }).then((AMap)=>{
    mapRef.value = new AMap.Map("map",{//设置地图容器id
      zoom: 18,
      zooms:[13,20],
      center: [...location],
      showLabel: false,
      viewMode: '3D',

      features: ['bg', 'road', 'point'],
      // mapStyle: 'amap://styles/light',
      // layers: [
      //   // 高德默认标准图层
      //   new AMap.TileLayer.Satellite(),
      //   // 楼块图层
      //   new AMap.Buildings({
      //     zooms: [13,20],
      //     zIndex: 10,
      //     heightFactor: 2 //2倍于默认高度，3D下有效
      //   })
      // ],

      pitch: 50,
    });
    AMap.plugin(["AMap.MouseTool"],function(){
      mousetool.value = new AMap.MouseTool(mapRef.value);
      mousetool.value.on('draw',(e) => {
        console.log(e.obj);
        //区域
        if(e.obj.className === 'Overlay.Polygon'){
          const polygon = new AMap.Polygon(e.obj._opts)
          polygon.on('rightclick',(e) => {
            console.log(e)
            contextMenuFun(e,AMap)
          })
          mapRef.value.add(polygon)
        }else if(e.obj.className === 'Overlay.Polyline'){
          const polyline = new AMap.Polyline(e.obj._opts)
          polyline.on('rightclick',(e) => {
            console.log(e)
            contextMenuFun(e,AMap)
          })
          mapRef.value.add(polyline)
        }else if(e.obj.className === 'AMap.Marker'){
          const marker = new AMap.Marker({
            ...e.obj._opts,
            zooms:[14,20]
          })
          marker.on('rightclick',(e) => {
            console.log(e)
            contextMenuFun(e,AMap)
          })
          mapRef.value.add(marker)
        }
        mousetool.value.close(true)
      })
    });
  }).catch(e => {
    console.log(e);
  })
}

const drawArea = (level) => {
  console.log(`绘制${level}级区域`);
  const colorOptions = ['#00CC66','#CC0066','#FFFF66']
  const zIndexOptions = [10,12,14]//区域高度
  // 使用鼠标工具，在地图上画区域
  mousetool.value.polygon({
    fillColor:colorOptions[level - 1],
    zIndex:zIndexOptions[level - 1],
    extData:{
      areaLevel:level
    }
  })
}
const drawLine = () => {
  console.log('绘制管道');
  mousetool.value.polyline({
    strokeColor :'red',
    strokeOpacity  :1,
    strokeWeight   :4,
    zIndex:15,
  })
}
const drawPoint = (type) => {
  console.log(type);
  mousetool.value.marker({
    content :type,
    draggable:true,
    topWhenClick:true,
    zIndex:17,
  })
}
const savaDraw = () => {
  console.log(mapRef.value. getAllOverlays());
}
const clearDraw = () => {
  mapRef.value.clearMap()
}
onMounted(() => {
  initMap()
})
</script>
<style scoped lang="scss">
.container{
  width:100%;
  height:100vh;
  background: red;
  display: flex;
  flex-wrap: nowrap;
  .left{
    flex: 0 0 260px;
    width: 260px;
    height:100%;
    background: yellow;
  }
  .middle{
    width:100%;
    height:100%;
    background: #f5f5f5;
  }
  .right{
    flex: 0 0 240px;
    width: 240px;
    height:100%;
    background: #ffffff;
    .list{
      .item{
        width:80px;
        height:80px;
        margin: 10px auto 10px;
        border-radius: 10px;
        text-align: center;
        line-height: 80px;
        background: #1677FF;
        color:#ffffff;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}
</style>